<template>
  <div class="dashboard-editor-container">

        <div class="handleBtn">
          <el-row>
            <el-col :span="15" style="display:flex">
              <el-input style="max-width:500px"></el-input>
              <el-button type="warning" icon="el-icon-search" style="margin-left:10px">查询</el-button>
            </el-col>
            <el-col :span="9" style=" text-align:right;">
              <el-button type="primary" @click="addData = true">增加数据</el-button>


              <el-button type="info">导出数据</el-button>


              <el-button type="success">导入数据</el-button>
              </el-col>
</el-row>          
        </div>

      <!-- 表格开始 -->
      <el-table
        v-loading="listLoading"
        :key="tableKey"
        :data="list"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="名次" type="index" width="50" align="center"></el-table-column>
        <el-table-column label="商户名" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.author }}</span>
          </template>
        </el-table-column>
        <el-table-column label="MAC" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.body }}</span>
          </template>
        </el-table-column>
        <el-table-column label="SN" prop="id" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="次数" prop="id" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.count }}12</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="id" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.lastModified}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地区(市)" prop="id" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.city }}重庆</span>
          </template>
        </el-table-column>
        <el-table-column label="设备类型" prop="id" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deviceModel }}类型</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, list)"
              type="text"
              size="small">
              移除
            </el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="queryTable"/>

      <!-- 添加数据对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="addData"
        width="40%"
      >
        <span>
          <!-- 表单 -->
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="88px" class="demo-ruleForm">
            <el-form-item label="商户名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="MAC" prop="mac">
              <el-input v-model="ruleForm.mac"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addData = false">取 消</el-button>
          <el-button type="primary" @click="toAdd">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="项目" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm">
          <el-form-item label="商户名称" :label-width="formLabelWidth">
            <el-input v-model="ruleForm.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="MAC" :label-width="formLabelWidth">
            <el-input v-model="ruleForm.mac" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clearData">取 消</el-button>
          <el-button type="primary" @click="clearData">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  import CountTo from 'vue-count-to'
  import {formatTime} from "@/utils/time"
  import {getAdDate, getAdTable, downLoadTable, downLoadPlays} from "@/api/advertisement"
  import Pagination from '@/components/Pagination'
  import waves from '@/directive/waves'
  import axios from 'axios'

  const calendarTypeOptions = [
    {key: 'CN', display_name: 'China'},
    {key: 'US', display_name: 'USA'},
    {key: 'JP', display_name: 'Japan'},
    {key: 'EU', display_name: 'Eurozone'}
  ]
  const TIMELIMIT = 15
  // arr to obj ,such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    components: {
      CountTo, Pagination
    },
    data() {
      return {
        diyTime: true,
        timeLimit: TIMELIMIT,
        tableKey: 0,
        list: null,
        listLoading: false,
        listLoadingPanel: false,
        addData: false,
        ruleForm: {
          name: '',
          mac:''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          mac: [
            { required: true, message: '请输入mac', trigger: 'blur'}
          ]
        },
        dialogFormVisible: false,
        formLabelWidth: '120px',
        // 分页
        total: 1,
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
          startTime: undefined,
          endTime: undefined,
          mac: undefined,
          searchKey:undefined,
          city: undefined,
          playStatus:undefined,
          deviceModel:undefined,
        },
      }
    },
    directives: {waves},
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    methods: {
      //获取用户添加数据添加到表格中
      toAdd(){
        if(this.ruleForm.name == ''){
          this.$message.error('请输入商户名称');
          return;
        }
        this.list.push({
          author: this.ruleForm.name
        });
        this.addData = false;
        this.ruleForm.name = '';
        this.ruleForm.mac = '';
      },
      //表格删除数据
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      //表格数据编辑
      handleEdit(index, row) {
        console.log(row);
        this.ruleForm.name = row.author;
        this.ruleForm.mac = row.body;
        this.dialogFormVisible = true;
      },
      clearData(){
        this.dialogFormVisible = false;
        this.ruleForm.name = '';
        this.ruleForm.mac = '';
      },
      //分页
      queryTable() {
        this.selectedTime = [this.startTime, this.endTime]
        this.listLoading = false
        this.listQuery.startTime = this.startTime
        this.listQuery.endTime = this.endTime
        getRecodList(this.listQuery).then(response => {
          this.list = response.data.data.data
          this.listLoading = false;
          console.log(this.total)
          this.total = response.data.data.rowCount
        })
      },
    },
    computed: {
    },
    mounted() {
      axios.get('https://192.168.1.127:44314/api/testContent')
      .then(res => {
        this.list = res.data;
        console.log(this.list);
      })
      .catch(err => {
        console.log(err);
        })
      alert("mounted");
    },
    created(){
      alert("created");
    },
    destroyed() {
      alert("destroyed");
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .handleBtn{
    width:100%;
    background-color: rgb(255, 255, 255);
    padding: 20px;
    border: 1px solid #ebeef5;
    margin-bottom: 10px;
  }
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

    .date-btn {
      margin: -20px auto 10px auto;
      width: 100%;
      background-color: white;
      padding: 7px;
    }

    .panel-group {

      .card-panel-col {
        margin-bottom: 12px;
      }

      .card-panel {
        height: 110px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #9e9e9e;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);

        .card-panel-icon {
          float: right;
          font-size: 48px;
          margin-top: 31px;
          color: #00a0dc;
        }
      }

      .card-panel:hover {
        cursor: default;
        box-shadow: 5px 6px rgba(0, 0, 0, 0.09);
        transform: translate(0, -2px);
      }

      .title {
        font-size: 13px;
        padding: 20px
      }

      .title-two {
        padding-top: 10px;
      }

      .number {
        font-size: 18px;
        padding: 10px 0;
        color: #409fff;
        font-weight: bold;
      }

      .unit {
        font-size: 13px
      }
    }

    .play-top {
      background-color: white;
      color: #9e9e9e;

      .index {
        color: #008ec6;
        line-height: 70px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }

      div {
        padding: 10px 5px;
      }
    }
  }
</style>
